import React, { Component } from "react";
import { Layout } from "antd";
import "./dashboard.scss";
import { Menu } from "antd";
import { Icon } from "antd";
import SubMenu from "antd/lib/menu/SubMenu";

interface SideProps {
  collapsed: boolean;
  updateTabs: Function;
  menuList: Array<any>;
}

class DashboardSide extends Component<SideProps> {
  constructor(props: SideProps) {
    super(props);
  }

  render() {
    return (
      <Layout.Sider
        width="210"
        className="dashboard-side"
        collapsible={true}
        collapsed={this.props.collapsed}
        trigger={null}
      >
        <div className="logo">
          <img src="https://avatars0.githubusercontent.com/u/17498284?s=460&amp;v=4" />
        </div>
        <Menu className="side-menu" mode="inline" theme="dark">
          {this.props.menuList.map((menu: any) => {
            if (menu.subMenu && menu.subMenu.length > 0) {
              return (
                <SubMenu
                  className="side-submenu"
                  key={menu.id}
                  title={
                    <span>
                      <Icon type={menu.icon ? menu.icon: 'file'} />
                      <span>{menu.label}</span>
                    </span>
                  }
                >
                  {menu.subMenu.map((subMenu: any) => {
                    return (
                      <Menu.Item
                        key={subMenu.id}
                        onClick={() => this.props.updateTabs(subMenu)}
                      >
                        <Icon type={subMenu.icon ? subMenu.icon: 'file'} />
                        <span>{subMenu.label}</span>
                      </Menu.Item>
                    );
                  })}
                </SubMenu>
              );
            } else {
              return (
                <Menu.Item
                  key={menu.id}
                  onClick={() => this.props.updateTabs(menu)}
                >
                  <Icon type={menu.icon ? menu.icon: 'file'} />
                  <span>{menu.label}</span>
                </Menu.Item>
              );
            }
          })}
        </Menu>
      </Layout.Sider>
    );
  }
}

export default DashboardSide;
